<template>
  <div>
    <el-form :inline="true" :model="queryParams" class="demo-form-inline" ref="resourceForm">
      <el-form-item label="资源名单名称" prop="mapperName">
        <el-input v-model="queryParams.mapperName" placeholder="资源名单名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="请求方式" prop="url">
        <!--        clearable出现删除按钮-->
        <el-input v-model="queryParams.url" placeholder="资源名单名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="资源领域类别" prop="sourceId">
        <el-select v-model="queryParams.sourceId" placeholder="资源领域类别" clearable>
          <el-option label="不限" value=""></el-option>
          <el-option v-for="item in categorySelects" :label="item.sourceName" :value="item.id"
                     :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleReset()">重置</el-button>
        <el-button type="primary" @click="loadData()" :disabled="isLoading">查询</el-button>
      </el-form-item>
    </el-form>
    <el-card class="box-card">
      <!--      <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>-->
      <el-button @click="handleDlg(0)">添加</el-button>
      <el-button @click="$router.push({name:'resource-category'})">资源领域分类</el-button>
      <el-table
          :data="tableData"
          border
          style="width: 100%" v-loading="isLoading">
        <el-table-column
            type="index"
            label="编号"
            width="180"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="id"
            label="逻辑编号"
            width="180"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="requestMethod"
            label="请求方式"
            width="180"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="mapperName"
            label="资源名单名称"
            width="180"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="url"
            label="api路径"
            width="180"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="action"
            label="请求方式索引"
            width="180"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间" align="center"
            :formatter="timeFormater"
        >
        </el-table-column>
        <el-table-column
            label="操作" align="center">
          <template v-slot="scope">
            <el-button size="mini" @click="handleDlg(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryParams.pageNum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryResult.totalSize"
          :disabled="isLoading"
      >
      </el-pagination>
      <UpdateCreateLimit ref="limitDlg" @resource-change="loadData"/>
    </el-card>

  </div>
</template>

<script>
//资源名单分页接口
import {getAllResourceLimitList, RemoveLimit} from '@/api/interfaceLimit/interfacelimit'
import UpdateCreateLimit from './UpdateCreateInterfaceLimit.vue'
//资源领域下拉列表接口
import {gainResourceSelects} from "@/api/resource/resource";
import dayjs from "dayjs";

export default {
  name: "InterfaceLimit",
  components: {
    // eslint-disable-next-line vue/no-unused-components
    UpdateCreateLimit: UpdateCreateLimit
  },
  data() {
    return {
      //分页查询参数
      queryParams: {
        id: undefined,
        mapperName: undefined,
        url: undefined,
        createTime: undefined,
        sourceId: undefined,
        pageSize: 1,
        pageNum: 10
      },
      //查询结果
      queryResult: [],
      //下拉资源领域列表
      categorySelects: [],
      tableData: [],
      //是否加载数据 false加载成功  true正在加载
      isLoading: false
    }
  },
  created() {
    this.loadData()
    this.loadResourceSelects()
  },
  methods: {
    //时间格式化  这四个参数是默认的参数  行、列、值、索引
    timeFormater(row, column, value, index) {
      return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
    },
    //资源名单列表
    loadData() {
      this.isLoading = true
      getAllResourceLimitList(this.queryParams).then(res => {
        console.log("资源名单数据::::", res);
        // debugger
        if (res.data.code === '200') {
          //当前页,当前页显示多少条数据,展示的多少条,总页数,总记录数
          const {currPage, pageSize, rows, totalPage, totalSize} = res.data.data;
          //当前页,当前页显示多少条数据,和后端数据一致
          console.log("查询参数:", this.queryParams);
          this.queryParams.pageSize = currPage;
          this.queryParams.pageNum = pageSize;
          //展示的多少条,总页数,总记录数
          this.queryResult = {rows, totalPage, totalSize}
          this.tableData = this.queryResult.rows
          console.log("查询参数:", this.queryParams);
        } else {
          this.$message.error('获取资源名单分页数据失败!')
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    loadResourceSelects() {
      gainResourceSelects().then(res => {
        if (res.data.code == '200') {
          this.categorySelects = res.data.data;
        } else {
          this.$message.error('获取资源领域下拉列表数据失败!')
        }
        console.log("资源名单下拉列表:::", res);
      })
    },
    //每页显示多少条数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageNum = val;
      this.queryParams.pageSize = 1;
      this.loadData()
    },
    //当点击不同的页号时
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageSize = val;
      this.loadData()
    },
    //重置方法条件
    handleReset() {
      this.$refs.resourceForm.resetFields()
    },
    //添加或编辑对话框
    handleDlg(limitId) {
      this.$refs.limitDlg.showAndInit(limitId)
    },
    //删除资源名单
    handleDelete(limitId){
      this.$confirm('确认要删除该资源吗?','删除提示').
      then(()=>{
        RemoveLimit(limitId).then(res=>{
          if(res.data.code=='200'){
            this.$message.success('删除资源的操作成功！')
            this.loadData()
          }else {
            this.$message.info('删除资源的操作失败！')
          }
        })
      }).catch(()=>{
        this.$message.info('取消了删除资源的操作！')
      })



    }
  },
}
</script>

<style scoped>
.main-table {
  margin-top: 20px;
}
</style>
